<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>动态条件 + 分页查询 + layui动态表格</title>
	<link rel="stylesheet" href="../layui/css/layui.css">
	<link rel="stylesheet" href="../layui/css/global.css">
	<link rel="stylesheet" href="../css/admin.css">
	<script src="../layui/layui.js"></script>
</head>
<body>

<!-- 搜索表单开始 -->
<form class="layui-form">
	<div class="layui-inline">
		<label class="layui-form-label">查询条件</label>
		<div class="layui-input-block">
			<input type="text" id="name" name="name" style="width: 400px;"  placeholder="请输入商品名称" autocomplete="off" class="layui-input">
		</div>
	</div>

	<div class="layui-inline">
		<select name="type" id="type" lay-filter="type" lay-search="">
			<option value="">商品类型</option>
		</select>
	</div>

	<div class="layui-inline">
		<input type="button" id="selectBtn" class="layui-btn" data-type="reload" value="查询">
	</div>
	<div class="layui-inline">
		<input type="button" id="addBtn" class="layui-btn" data-type="reload" value="添加">
	</div>
</form>
<!-- 搜索表单结束 -->

<!-- 操作工具条件开始 -->
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="delete">删除</button>
		<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update">编辑</button>
	</div>
</script>
<!-- 操作工具条件结束 -->

<!-- 添加表单开始 -->
<div id="addContainer" style="display: none">
	<form class="layui-form" id="addForm" lay-filter="example" style="margin: 1rem">

		<div class="layui-form-item">
			<label class="layui-form-label">商品编号</label>
			<div class="layui-input-block">
				<input type="text" id="add-productId" name="productId"
					   autocomplete="off" class="layui-input" />
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">商品名称</label>
			<div class="layui-input-block">
				<input type="text" id="add-productName" name="productName"
					   autocomplete="off" class="layui-input" />
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">商品类型</label>
			<div class="layui-input-block">
				<select name="productType" id="add-type" lay-filter="type" lay-search="">
					<option value="">请选择类型</option>
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">商品价格</label>
			<div class="layui-input-block">
				<input type="text" id="add-productPrice" name="productPrice"
					   autocomplete="off" class="layui-input" />
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-block">
				<input type="radio" id="add-productStatus1" name="productStatus"
					   value="1" title="上架" checked>
				<input type="radio" id="add-productStatus2" name="productStatus"
					   value="0" title="下架">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">描述</label>
			<div class="layui-input-block">
        		<textarea id="add-productDesc" name="productDesc"
						  placeholder="请输入内容" class="layui-textarea">
				</textarea>
			</div>
		</div>
	</form>
</div>
<!-- 添加表单结束 -->

<!-- 修改表单开始 -->
<div id="updateContainer" style="display: none">
	<form class="layui-form" id="updateForm" lay-filter="example" style="margin: 1rem">

		<div class="layui-form-item">
			<label class="layui-form-label">商品编号</label>
			<div class="layui-input-block">
				<input type="text" id="update-productId" name="productId"
					   autocomplete="off" class="layui-input" />
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">商品名称</label>
			<div class="layui-input-block">
				<input type="text" id="update-productName" name="productName"
					   autocomplete="off" class="layui-input" />
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">商品类型</label>
			<div class="layui-input-block">
				<select name="productType" id="update-type" lay-filter="type" lay-search="">
					<option value="">请选择类型</option>
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">商品价格</label>
			<div class="layui-input-block">
				<input type="text" id="update-productPrice" name="productPrice"
					   autocomplete="off" class="layui-input" />
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">状态</label>
			<div class="layui-input-block">
				<input type="radio" id="update-productStatus1" name="productStatus"
					   value="1" title="上架" checked>
				<input type="radio" id="update-productStatus2" name="productStatus"
					   value="0" title="下架">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">描述</label>
			<div class="layui-input-block">
        		<textarea id="update-productDesc" name="productDesc"
						  placeholder="请输入内容" class="layui-textarea">
				</textarea>
			</div>
		</div>
	</form>
</div>
<!-- 修改表单开始 -->


<!-- 动态数据表格-->
<!-- 第一：定义页面结构 -->
<table id="table_data" lay-filter="test" style="width: 80%;text-align: center" class="layui-table"></table>

<!-- 第二：使用插件方法 -->
<script>
	// 加载 layui 的相关模块
	layui.use(['jquery', 'table', 'layer', 'form'],function(){
		// 实例化动态表格的实例对象
		let $ = layui.jquery;
		let table = layui.table;
		let layer = layui.layer;
		let form = layui.form;

		// 使用jquery，实现向服务发起 ajax 异步请求
		$.ajax({
			url: 'QueryProductTypeServlet',
			type: 'get',
			success: function (res) {
				if (res.code == 200) {
					$.each(res.data, function (index, obj) {
						// 填充搜索表单商品类型
						$('#type').append('<option value="'+ obj.typeName + '" >' + obj.typeName + '</option>');

						// 填充修改表单商品类型
						$('#update-type').append('<option value="'
								+ obj.typeName + '">' + obj.typeName + '</option>');

						// 填充添加表单商品类型
						$('#add-type').append('<option value="'
								+ obj.typeName + '">' + obj.typeName + '</option>');
					});

					// 重新渲染表单
					form.render('select');
				}
			}
		});

		// 定义动态表格相关的参数 - 页面加载时，把后台数据显示在table组件中
		table.render({
			elem: '#table_data' 		// 绑定表格节点
			,url:'queryByPager.do'		// 指定服务器程序的地址
			,cols:[[					// 定义列头和绑定数据
				// {field: '实体对象的属性名称', title: '列头显示内容', width:宽, sort: 是否排序, fixed: '定位'}
				{field: 'productId', title: '商品编号', width:120, fixed: 'left'}
				,{field: 'productName', title: '商品名称', width:340, fixed: 'left'}
				,{field: 'productPrice', title: '商品价格', width:120, fixed: 'left', sort:true}
				,{field: 'productDate', title: '上货日期', width:130, fixed: 'left',templet:function(row) {
						let date = new Date(row.productDate);
						console.log(date);
						let year = date.getFullYear();

						let month = date.getMonth()+1 ;
						month = month<10?'0'+month:month ;

						let day = date.getDate();
						day = day<10?'0'+day:day ;

						return year + "-" + month + "-" + day ;
					}}
				,{field: 'productStatus', title: '商品状态', width:120, fixed: 'left',templet:function(row){
						// console.log(row)
						if(row.productStatus==1) {
							return '上架';
						} else{
							return '下架'
						}
					}}
				,{title: '操作', fixed: 'left',toolbar:'#toolbarDemo'}
			]]
			// 把后台数据转换为layui中table组件所要求的数据格式，如果参数名称一致，则可以省略
			,parseData:function( res ) {
				// console.log(res) ;
				return {
					"code":res.code==200 ? 0 : res.code,
					"data":res.data,
					"count":res.count
				};
			}
			,page: true 			// 开启分页
			,limit:5				// 每页显示5条记录
			,limits:[5,10,15,20] 	// 根据需要，用户可以动态指定每页显示的记录数
		});


		// 实现条件查询
		let active = {
			reload: function () {
				// 重载加载表格
				table.reload('table_data', {
					page: {
						curr: 1 // 重新从第 1 页开始
					}
					, where: {
						name: $('#name').val(),
						type: $('#type').val()
					}
				});
			}
		};

		// 绑定查询按钮
		// $('.layui-this').on('click', function () {
			// type='reload'
			// let type = $(this).data('type');
			// active[type] ? active[type].call(this) : '';
			// console.log("ik")

			// 重载加载表格
			// table.reload('table_data', {
			// 	page: {
			// 		curr: 1 // 重新从第 1 页开始
			// 	}
			// 	, where: {
			// 		// name: $('#name').val(),
			// 		type: $('#type').val()
			// 	}
			// });
		// });

		// 绑定查询按钮
		$('#selectBtn').on('click', function () {
			// type='reload'
			// let type = $(this).data('type');
			// active[type] ? active[type].call(this) : '';
			console.log("i01110k")

			// 重载加载表格
			table.reload('table_data', {
				page: {
					curr: 1 // 重新从第 1 页开始
				}
				, where: {
					name: $('#name').val(),
					type: $('#type').val()
				}
			});
		});


		// 监听表格操作按钮 -- 其中，test为 table节点中的 lay-filter 属性的值
		table.on('tool(test)',function (obj){
			console.log(obj) ;
			if(obj.event=='delete') {
				// 获取当前行的数据
				let p = obj.data ;

				// 弹出确认框
				layer.confirm("您真的要删除此条数据码？",function( index ){
					// 向服务器发起异步请求，实现数据的删除
					$.ajax({
						url:'RemoveProductServlet',
						method:'get',
						data:{'pid':p.productId},
						success:function( res ){
							// 弹出提示框
							layer.msg(res.msg)
							// 根据弹出层的索引，关闭弹出确认框
							layer.close(index) ;

							if(res.code == 200) {
								// 重新加载表格数据
								table.reload('table_data',{page:{curr:1}});
							}
						}
					}) ;
				}) ;



			} else if(obj.event=='update') {
				// 第一：获取当前行的数据
				let p = obj.data ;

				// 第二：弹出修改窗体，并把当前行的数据回显在页面中
				// 1.把数据设置在修改表单中
				$("#update-productId").val(p.productId) ;
				$("#update-productName").val(p.productName) ;

				$("#update-type option").filter(function(){
					return $(this).text() == p.productType ;
				}).prop("selected",true) ;

				$("#update-productPrice").val(p.productPrice) ;
				if(p.productStatus==1) {
					$("#update-productStatus1").prop("checked",true) ;
				} else {
					$("#update-productStatus2").prop("checked",true) ;
				}
				$("#update-productDesc").text(p.productDesc) ;

				// 重新渲染表单
				form.render();

				// 2.弹出窗体
				layer.open({
					type:1,
					title:'修改商品',
					area:['50%','35em'],
					resize:false,
					content:$("#updateContainer"),
					btn:['修改','取消'],
					btn1:function( index ) {
						$.ajax({
							url:'UpdateProductServlet',
							method:'post',
							data:$("#updateForm").serialize(),
							success:function( res ){
								// 弹出提示框
								layer.msg(res.msg)
								// 根据弹出层的索引，关闭弹出确认框
								layer.close(index) ;

								if(res.code == 200) {
									// 重新加载表格数据
									table.reload('table_data',{page:{curr:1}});
								}
							}
						}) ;
					}
				}) ;
			}
		});

		// 实现添加商品操作
		$("#addBtn").click(function (){
			layer.open({
				type:1,
				title:'添加商品',
				area:['50%','35em'],
				resize:false,
				content:$("#addContainer"),
				btn:['添加','取消'],
				btn1:function( index ) {
					$.ajax({
						url:'InsertProductServlet',
						method:'post',
						data:$("#addForm").serialize(),
						success:function( res ){
							// 弹出提示框
							layer.msg(res.msg)
							// 根据弹出层的索引，关闭弹出确认框
							layer.close(index) ;

							if(res.code == 200) {
								// 重新加载表格数据
								table.reload('table_data',{page:{curr:1}});
							}
						}
					}) ;
				}
			}) ;
		}) ;
	}) ;
</script>
</body>
</html>